<%--
  Created by IntelliJ IDEA.
  User: 高朋
  Date: 2020/11/14
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>检索图书</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        .user_img{
            border:1px solid blueviolet;
            background-color: #337ab7;
        }
        .input{
            border:1px solid blueviolet;
            background-color: #337ab7;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .user_img span{
            color:blue;
        }
        input{
            height:25px;
            border-radius: 5px;
        }
        .submit{
            border-radius: 5px;
            background-color: #0d7ede;
            line-height: 25px;
            margin:10px
        }
        table{
            border: 1px solid;
            margin: auto;
            width: 1300px;
        }
        th,td{
            text-align: center;
            border: 1px solid;
            width: 120px;
        }
        caption{
            text-align: center;
            font-family: 楷体;
            color: #0f0f0f;
            font-size: large;
        }
    </style>

</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<div class="user_img">
    <img src="imag/home.png" width="40" height="40" alt="...">
    您现在所在的位置是：<span>检索图书页面</span>
</div>

<div class="input">
    <form action="${pageContext.request.contextPath}/user.do" method="post">
        书籍编号：<input type="text" name="bookNo" id="BookNo">
        书籍名称：<input type="text" name="bookName" id="BookName">
        <input type="button" name="search" value="查找" class="submit" method="search" id="search">
        <input type="button" name="searchAll" value="查找所有" class="submit" method="searchAll" id="searchAll">

    </form>

    <table>
        <caption>书籍信息表</caption>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>出版社</th>
            <th>出版时间</th>
            <th>作者</th>
            <th>存放位置</th>
            <th>价格</th>
            <th>是否借出</th>
            <th>操作</th>
        </tr>
    </table>
    <table id="table">

    </table>
</div>

<a class="path" href="${pageContext.request.contextPath}"></a>

<script>
    //===============查找=============

    //给查询按钮绑定事件
  $("#search").click(function(){
        //alert("成功进入事件")
        //获得表单对象
        let table=$("#table");
        //清除表单内容
        table.find("tr").remove();
        //获取书籍编号和名称
      let bookNo=$("#BookNo").val();
      let bookName=$("#BookName").val();
      //alert(bookNo+"---"+bookName);
        //获取返回的书本信息
        $.ajax({type:"POST",
            url:"user.do",
            dataType:"json",
            data:{"bookNo":bookNo,"bookName":bookName,"ajax":"ajax"},
            success:function (data){
                //alert("成功进入success")
                //alert(data);
                for(let i=0;i<data.length;i++)
                {
                    //创建tr
                    let tr = document.createElement("tr");
                    let book=data[i];
                    for(let key in book) {
                        //alert(key + ":" + book[key]);
                        //创建td，设置td的内容
                        let td_id = document.createElement("td");
                        let text_id=document.createTextNode(book[key]);
                        td_id.appendChild(text_id);
                        tr.appendChild(td_id);
                    }
                    let td_a=document.createElement("td");
                    let a=document.createElement("a");
                    let text_a=document.createTextNode("删除");
                    let b=document.createElement("a");
                    let text_b=document.createTextNode("  修改");
                    a.setAttribute("href","javascript:void(0)");
                    a.setAttribute("onclick","del(this)")
                    a.appendChild(text_a);
                    b.setAttribute("href","javascript:void(0)");
                    b.setAttribute("onclick","update(this)")
                    b.appendChild(text_b);
                    td_a.appendChild(a);
                    td_a.appendChild(b);
                    tr.appendChild(td_a);
                    table[0].appendChild(tr);
                }
                //alert("退出success");
            },
        error:function(data){
            alert("error");
        }});
    });

    //==============查找所有==========
    //给查询所有按钮绑定事件
    $("#searchAll").click(function(){
        //alert("成功进入事件")
        //获得表单对象
        let table=$("#table");
        //清除表单内容
        table.find("tr").remove();
        /*//获取书籍编号和名称
        let bookNo=$("#BookNo").val();
        let bookName=$("#BookName").val();*/
        //alert(bookNo+"---"+bookName);
        //获取返回的书本信息
        $.ajax({type:"POST",
            url:"user.do",
            dataType:"json",
            data:{"ajax":"all"},
            success:function (data){
                //alert("成功进入success")
                //alert(data);
                for(let i=0;i<data.length;i++)
                {
                    //创建tr
                    let tr = document.createElement("tr");
                    let book=data[i];
                    for(let key in book) {
                        //alert(key + ":" + book[key]);
                        //创建td，设置td的内容
                        let td_id = document.createElement("td");
                        let text_id=document.createTextNode(book[key]);
                        td_id.appendChild(text_id);
                        tr.appendChild(td_id);
                    }
                    //添加单元格，增加删除和修改操作
                    let td_a=document.createElement("td");
                    let a=document.createElement("a");
                    let text_a=document.createTextNode("删除");
                    let b=document.createElement("a");
                    let text_b=document.createTextNode("  修改");
                    //给删除和修改设置属性，实现点击链接不跳转
                    a.setAttribute("href","javascript:void(0)");
                    a.setAttribute("onclick","del(this)")
                    a.appendChild(text_a);
                    b.setAttribute("href","javascript:void(0)");
                    b.setAttribute("onclick","update(this)")
                    b.appendChild(text_b);
                    td_a.appendChild(a);
                    td_a.appendChild(b);
                    tr.appendChild(td_a);
                    table[0].appendChild(tr);
                }
                //alert("退出success");
            },
            error:function(data){
                alert("error");
            }});
    });

    function del(obj)
    {
        let table=obj.parentNode.parentNode.parentNode;
        let tr=obj.parentNode.parentNode;
        table.removeChild(tr);
        let bookNo=tr.firstChild.textContent;
        //alert(bookNo);
        $.ajax({
            type:"post",
            url:"user.do",
            data:{"ajax":"del","bookNo":bookNo}
        });
    }

    function update(obj)
    {
        //获取所在行对象
        let tr=obj.parentNode.parentNode;
        //获取所在行所有单元格的内容
        let bookNo=tr.cells[0].innerHTML;
        let bookName=tr.cells[1].innerHTML;
        let press=tr.cells[2].innerHTML;
        let pubTime=tr.cells[3].innerHTML;
        let author=tr.cells[4].innerHTML;
        let location=tr.cells[5].innerHTML;
        let price=tr.cells[6].innerHTML;
        let isBorrowed=tr.cells[7].innerHTML;
        //跳转到修改页面，并且把相关参数拼接在url后面
        let url=$(".path").attr("href");
        //alert(url);
        window.location.href=url+"/modify.jsp?bookNo="+bookNo+"&bookName="+bookName+"&press="+press+
            "&pubTime="+pubTime+"&author="+author+"&location="+location+"&price="+price+"&isBorrowed="+isBorrowed;

    }
</script>



</body>
</html>
